<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<title>位置</title>
		<style type="text/css">
			html {
				height: 100%
			}
			
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
			
			#container {
				height: 100%
			}
			
			.mui-icon.map-btn {
				position: absolute;
				left: 10px;
				width: 50px;
				height: 50px;
				background: rgba(255, 255, 255, .8);
				line-height: 50px;
				text-align: center;
				box-shadow: 0 0 5px rgba(0, 0, 0, .3);
				display: inline-block;
			}
			.mui-icon.search-submit{
				position: absolute;
				top: 0px;
				right: 0;
				background: none;
				border: none;
			}
			#location {
				bottom: 50px;
			}
			#search {
				bottom: 110px;
			}
			#container{
				height: 100%;
			}
			.search-input {
				position: absolute;
				top: -55px;
				left: 0;
				right: 0;
				box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
				transition: top .5s;
				z-index: 999;
			}
			#search-input {
				padding: 10px;
				background: #fff;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qBXDgnWnvXA49j5tDB9NsOHzLWQIGmYL">
			//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
		</script>
	</head>
	<body>
		<div class='search-input'>
			<input type="text" class='mui-input-clear' id='search-input' placeholder="搜地点" />
			<button type='submit' class="mui-icon mui-icon-search search-submit"></button>
		</div>
		<div id="container"></div>
		<a href="javascript:void(0)" class='mui-icon mui-icon-location-filled map-btn' id="location"></a>
		<a href="javascript:void(0)" class='mui-icon mui-icon-search map-btn' id="search"></a>
		<script src='../js/mui.min.js'></script>
		<script>
			mui.init(); //初始化
			mui.plusReady(function() {
				var serchInput = document.getElementById('search-input');
				serchInput.addEventListener('focus', function() {
					plus.webview.currentWebview().setStyle({
						bottom: '0px'
					})
				});
				serchInput.addEventListener('blur', function() {
					plus.webview.currentWebview().setStyle({
						bottom: '51px'
					})
				});
			})
			var map = new BMap.Map("container"); // 创建地图实例 
			var mark,point;
			var geolocation = new BMap.Geolocation();
			//es5中的类是原型  geolocation为一个对象，geolocation有BMap原型中的所有方法和属性,方法是放在prototype中
			document.getElementById('location').addEventListener('tap', function() {
				geolocation.getCurrentPosition(function(r) { //回调函数   回调函数也可以传参数
					//console.log(point.lng, point.lat);
					if(this.getStatus() == BMAP_STATUS_SUCCESS) {
						//创建点的坐标
						var jing=r.point.lng;
						var wei=r.point.lat;
						point = new BMap.Point(jing, wei); // 长沙市创建点坐标
						//初始化地图，设置中心坐标和地图级别
						map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
						if(!mark) {
							mark = new BMap.Marker(r.point);
						}
						map.addOverlay(mark);
						map.panTo(r.point);
					}
				}, {
					enableHigAccuracy: true,
					maximumAge: 0
				});
			})

			document.getElementById('search').addEventListener('tap', function() {
				mui('.search-input')[0].style.top = '5px';
			});
			
			mui('.search-submit')[0].addEventListener('tap',function(){
				var searchString=document.getElementById('search-input').value;
					//center=map.getCenter();
					//console.log(center.lat,center.lng);
				var localsearch=new BMap.LocalSearch(map,{
					renderOptions: {map:map}
				});
				localsearch.clearResults();
				map.clearOverlays();//清楚已搜索过的覆盖物
				localsearch.searchNearBy(searchString,point,500);
			});
		</script>

</html>